<template>
  <div id="a-map"></div>
</template>

<script>
export default {
  props: {
    popupid: {
      type: String,
      default: 'popupid'
    }
  },
  data() {
    return {
      infoWindow: null,
      map: null
    }
  },
  created() { },
  async mounted() {
    var buildingLayer = new AMap.Buildings({
      zIndex: 130,
      zooms: [16, 20],
      opacity: 5,
    });
    this.map = new AMap.Map("a-map", {
      pitch: 70.3,
      zoom: 16.62,
      rotation: -411,
      viewMode: "3D",
      center: [117.200586, 39.142763],
      resizeEnable: true,
      mapStyle: "amap://styles/grey",
      layers: [AMap.createDefaultLayer(), buildingLayer],
    });
    //注入提示框
    this.infoWindow = new AMap.InfoWindow({
      isCustom: true,  //使用自定义窗体
      content: document.getElementById(this.popupid),
      // content: document.getElementById('dvBorderBox111'),
      offset: new AMap.Pixel(16, -45)
    });
    window.map = this.map;
  },
  methods: {
    closePopup() {
      this.map.clearInfoWindow()
    },
    renderMarkers(markData, mapParams) {
      this.map.clearMap()
      this.map.setPitch(mapParams.pitch)
      this.map.setRotation(mapParams.rotation)
      this.map.setZoom(mapParams.zoom)
      this.map.setCenter(mapParams.center)
      // this.map.setPitch(mapParams.pitch)
      var textStyle = {
        fontSize: 16,
        fontWeight: "normal",
        fillColor: "rgba(93, 209, 104, 0.8)",
        //   strokeColor: "#fff",
        //   strokeWidth: 2,
        fold: true,
        padding: "2, 5",
      };
      let markers = [];
      let labelMarkers = [];
      let pointFeatures = markData.features;
      for (let i = 0; i < pointFeatures.length; i++) {
        const element = pointFeatures[i];
        let iconPath = "";
        let fontColor = "";
        let _marker = new AMap.Marker({
          position: new AMap.LngLat(element.geometry.coordinates[0], element.geometry.coordinates[1]),
          icon: "./pin/2.png",
          imageSize: new AMap.Size(24, 90),
          size: new AMap.Size(24, 90),
          offset: new AMap.Pixel(-13, -90),
          extData:element.properties
        });
        let _labelMarker = new AMap.LabelMarker({
          name: "自提点5",
          position: element.geometry.coordinates,
          // zooms: [10, 20],
          opacity: 1,
          zIndex: 6,
          text: {
            content: element.properties.name,
            direction: "right",
            offset: [-30, -110],
            style: textStyle,
          },
        });
        markers.push(_marker);
        _marker.on('click', (E) => {
          this.$emit('markClick',E.target._opts)
          this.infoWindow?.open(this.map, _marker.getPosition());
        });
        labelMarkers.push(_labelMarker);
      }

      this.map.add(markers);
      this.map.add(labelMarkers);
    }
  }
};
</script>

<style>
#a-map {
  height: 100%;
  width: 100%;
}

/*.amap-info {*/
/*  width: 100% !important;*/
/*}*/
</style>
